<template>
    <div class="el-alert" :class="[type]" v-if="visible">
        <div v-if="showIcon">
            <i :class="['iconfont',iconcss]"></i>
        </div>
        <div class="el-alert-con">
            <div class="el-alert-title" :class="{'center':center}" v-if="title || $slots.title">
                <slot name="title">{{title}}</slot>
            </div>
            <p class="el-alert-description" :class="{'center':center}" >
                <slot>{{description}}</slot>
            </p>
        </div>
        <span v-if="closable" @click="close">x</span>
    </div>
</template>

<script>
export default {
    name:'el-alert',
    data(){
        return {
            visible:true
        }
    },
    props:{
        type:{
            type:String,    //数据类型    
            default:'info'  //给默认值
        },
        title:{
            type:String,
            default:'' 
        },
        description:{
            type:String,
            default:''
        },
        closable:{
            type:Boolean,
            default:true
        },
        center:{
            type:Boolean,
            default:false
        },
        showIcon:{
            type:Boolean,
            default:false
        }
    },
    mounted(){
        console.log(this.$slots.title)
    },
    methods:{
        close(){
            this.visible = false;
        }
    },
    computed:{
        iconcss(){
            const iconfontMap = {
                success:'icon-eye',
                info:'icon-mygroup',
                warn:'icon-listen',
                error:'icon-eye'
            };
            return iconfontMap[this.type]
        }
    }
}
</script>

<style lang="scss" scoped>
    .el-alert{
        width:100%;
        padding:8px 10px;
        border-radius: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .el-alert-con{
            width:100%;
        }

        .center{
            width:100%;
            text-align: center;
        }
        
        &.success{
            background-color:#67c23a;
            color:#fff;
        }
        &.info{
            background-color:#909399;
            color:#fff;
        }
        &.warn{
            background-color:#e6a23c;
            color:#fff;
        }
        &.error{
            background-color:#f56c6c;
            color:#fff;
        }
    }
</style>